import * as THREE from 'three'
import { gui } from '../gui'
import { stats } from '../stats'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { ConvexGeometry } from 'three/examples/jsm/geometries/ConvexGeometry'

function createCourse16 (dom: HTMLElement) {
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(75, dom.offsetWidth / dom.offsetHeight, 0.1, 1000)

  const render = new THREE.WebGLRenderer()
  render.setClearColor(new THREE.Color(0x000000))
  render.setSize(dom.offsetWidth, dom.offsetHeight)
  render.shadowMap.enabled = true

  dom.appendChild(render.domElement)

  const convexPoints = []
  for (let i = 0; i < 20; i++) {
    const x = Math.random() * 40 - 20
    const y = Math.random() * 40 - 20
    const z = Math.random() * 40 - 20
    convexPoints.push(new THREE.Vector3(x, y, z))
  }
  convexPoints.forEach(function (convexPoint) {
    const convexSphereGeo = new THREE.SphereGeometry(0.3)
    const convexSphereMat = new THREE.MeshBasicMaterial({ color: 0xff0000 })
    const convexSphere = new THREE.Mesh(convexSphereGeo, convexSphereMat)
    convexSphere.position.copy(convexPoint)
    // scene.add(convexSphere);
  })
  const axes = new THREE.AxesHelper(100)
  scene.add(axes)

  const convexGeo = new ConvexGeometry(convexPoints)
  const convexMat = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true })
  const convex = new THREE.Mesh(convexGeo, convexMat)
  scene.add(convex)

  const lathePoints: THREE.Vector2[] = []
  for (let i = 5; i < 30; i++) {
    lathePoints.push(new THREE.Vector2(i + 1, -Math.sin((i + 1) / 10) * 10 - Math.cos((i + 1) / 10) * 10))
  }

  const latheGeo = new THREE.LatheGeometry(lathePoints, 50, 0, Math.PI * 2)
  const latheMat = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true })
  let lathe = new THREE.Mesh(latheGeo, latheMat)
  scene.add(lathe)

  const ctrlObj = {
    segments: 50,
    phiStart: 0,
    phiLength: Math.PI * 2
  }

  const ctrl = gui
  const latheFolder = ctrl.addFolder('lathe')
  latheFolder.add(ctrlObj, 'segments', 0, 100).onChange(function () {
    scene.remove(lathe)
    const latheGeo = new THREE.LatheGeometry(lathePoints, ctrlObj.segments, ctrlObj.phiStart, ctrlObj.phiLength)
    lathe = new THREE.Mesh(latheGeo, latheMat)
    scene.add(lathe)
  })
  latheFolder.add(ctrlObj, 'phiStart', 0, 2 * Math.PI).onChange(function () {
    scene.remove(lathe)
    const latheGeo = new THREE.LatheGeometry(lathePoints, ctrlObj.segments, ctrlObj.phiStart, ctrlObj.phiLength)
    lathe = new THREE.Mesh(latheGeo, latheMat)
    scene.add(lathe)
  })
  latheFolder.add(ctrlObj, 'phiLength', 0, 2 * Math.PI).onChange(function () {
    scene.remove(lathe)
    const latheGeo = new THREE.LatheGeometry(lathePoints, ctrlObj.segments, ctrlObj.phiStart, ctrlObj.phiLength)
    lathe = new THREE.Mesh(latheGeo, latheMat)
    scene.add(lathe)
  })

  camera.position.x = 0
  camera.position.y = 0
  camera.position.z = 50
  camera.lookAt(scene.position)
  scene.add(camera)

  const controls = new OrbitControls(camera, render.domElement)
  controls.update()

  render.setAnimationLoop(anmation)

  function anmation () {
    stats.update()
    render.render(scene, camera)
  }

  return { camera, scene, render }
}

export {
  createCourse16
}
